<template>
<div class="car-serve-card" @click='jump'>

    <i-row>

        <i-col :sm='24' :span='8' >
            <div class="car-img">
                <div class="img-box">
                    <img :src="info.imgUrl" :alt="info.model">
                </div>
            </div>
        </i-col>
        
        <i-col :sm='24' :span='16' >

            <div class="info-content">

                <div class="info-main">

                    <div class="info-base">

                        <span class="text">
                            名称: {{info.name}}
                        </span>
                        
                        <span class="text">
                            电话: {{info.phone}}
                        </span>
                        
                        <span class="text">
                            区域: {{info.region}}
                        </span>

                        <span class="text">
                            地区: {{info.address}}
                        </span>

                    </div>
                        
                    <div class="info-tips">

                        <div class="info-tip" v-for='(item, index) of info.tips' :key='index'>
                            {{item}}
                        </div>
                            
                    </div>
                    
                </div>

                <div class="info-sub">

                    <span class="text">
                        网址/fackbook:  {{info.web}}
                    </span>
                    
                    <div class="icons">
                        <i class="iconfont whatsapp icon icon-WhatsApp"></i>
                        <i class="iconfont fackbook icon icon-facebook-fill"></i>
                    </div>
                    
                </div>

            </div>
            
        </i-col>
        
    </i-row>
        
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';

export interface ICarServCard{
    id: string,
    imgUrl: string,
    name: string,
    phone: string,
    region: string,
    address: string,
    web: string,
    tips: Array<string>
}


@Component
export default class Topbar extends Vue{

    @Prop()
    info?: ICarServCard
    
    jump(){

        if(!this.info){
            return;
        }
        let id:string = this.info.id;
        this.$router.push({
            path: '/car-serve-detaild',
            query: {id}
        })

    }
    
}


</script>

<style scoped lang='less'>

.car-serve-card{

    overflow: hidden;
    
    padding-bottom: 14*@rem;
    border: 1*@rem solid @color_8;
    background: @bgColor;
    
    .radius-df();
    .car-img{
        height: 200*@rem;
    }
    
}

.text{
    .textOverFlow();
    display: block;
    margin-top: 10*@rem;
    color: @mainColor;
}

.info-content{
    padding: 0 10*@rem;
    
}

.info-tips{
    font-size: @fontSizeSm;
    
}

.info-main{
    display: flex;
    justify-content: space-between;
}

.info-base{
    flex: 1 1;
}

.info-tips{
    overflow: hidden;
    text-align: right;
    @w: 80*@rem;
    flex: 0 0 @w;
    width: @w;
    .info-tip{
        .tipIcon-main();
        margin-top: 10*@rem;
        display: inline-block;
    }
    
}



.info-sub{
    display: flex;
    justify-content: space-between;
    align-items: center;

    .icons{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 4*@rem;
    }
    
    .icon{
        display: inline-block;
        margin: 10*@rem 0 0 6*@rem ;
        flex: 0 0 @size;
        @size: 22*@rem;
        font-size: @size;
    }

    .fackbook{
        font-size: 26*@rem;
        color: @color_9;   
    }
    .whatsapp{
        color: @successColor;
    }
    
}

/* 768 */
@media (max-width: 768px){

 .car-serve-card{
    padding-bottom: 0;

    .car-img{
        height: 160*@rem;
    }

    .info-tips{
    @w: 180*@rem;
    flex: 0 0 @w;
    width: @w;
    
    }
    
   .info-content{
     padding-bottom: 10*@rem;
   }
    
 }
 
}


/* 620px */
@media (max-width: 620px){

 .car-serve-card{
   
   .info-main{
        display: block;
   }

   .info-tips{
       text-align: left;
   }
   
 }
 
}


</style>